import React, { Component } from 'react';
import { Divider, Tabs, Checkbox, Spin, Empty, Row, Col, Select } from 'antd';
import _ from 'lodash';
import moment from 'moment';

const { Option } = Select;
const { TabPane } = Tabs;

class ContrastiveVersion extends Component {
  state = {};

  handleTabChange = key => {
    const { dispatch, versionItem } = this.props;
    const contrastItems = _.filter(versionItem, v => v.versionType === key)[0];
    dispatch({
      type: 'VersionComparison/setContrast',
      payload: { data: contrastItems, key, checked: 'null' },
    });
  };

  // 选中的对比版本默认id
  handleCheckBoxOnChange = (checked, key) => {
    const { dispatch, versionItem } = this.props;
    const contrastItems = _.filter(versionItem, v => v.versionType === key)[0];
    dispatch({
      type: 'VersionComparison/setContrast',
      payload: { data: contrastItems, key, checked },
    });
  };

  // 获取对比选中的版本id
  selectContrastiveVersionVal = (versionId, stageName, key) => {
    const { dispatch, contrastiveVersionIds } = this.props;
    const cloneIds = _.cloneDeep(contrastiveVersionIds);
    _.each(cloneIds, item => {
      if (item.versionType === key) {
        _.each(item.stageIds, v => {
          if (v.stageName === stageName) {
            v.versionId = versionId;
          }
        });
      }
    });
    dispatch({
      type: 'VersionComparison/editSelect',
      payload: { item: cloneIds, key: 'contrastiveVersionIds' },
    });
  };

  buildPlanVersionName = versionInfo => {
    if (versionInfo.versionTypeCode === 'dynamic') {
      if (
        versionInfo.versionStateCode === 'sys_generation' ||
        versionInfo.versionStateCode === 'success_approved'
      ) {
        return `${moment(versionInfo.versionAscriptionDate).format('YYYYMM')}月动态版${
          versionInfo.versionNum
        }-${moment(versionInfo.updateTime).format('YYYYMMDD')}`;
      }

      return `${moment(versionInfo.versionAscriptionDate).format('YYYYMM')}月动态版${
        versionInfo.versionNum
      }`;
    }
    if (
      versionInfo.versionTypeCode === 'investment' ||
      versionInfo.versionTypeCode === 'strategy' ||
      versionInfo.versionTypeCode === 'pricing'
    ) {
      if (
        versionInfo.versionStateCode === 'sys_generation' ||
        versionInfo.versionStateCode === 'success_approved'
      ) {
        return `${versionInfo.versionType}${versionInfo.versionNum}-${moment(
          versionInfo.updateTime,
        ).format('YYYYMMDD')} ${versionInfo.isAssessmentVersion * 1 === 1 ? '(考核版)' : ''}`;
      }
      return `${versionInfo.versionType}${versionInfo.versionNum} ${
        versionInfo.isAssessmentVersion * 1 === 1 ? '(考核版)' : ''
      }`;
    }
    return '';
  };

  render() {
    const { versionItem, loading } = this.props;
    return (
      <>
        <div className="card-title">对比版本</div>
        <Divider />
        <div className="card-sub_title">
          <div className="sub_title">
            <i></i>
            <span>对比版本类型 ( 多选 ) </span>
          </div>
        </div>
        <Tabs defaultActiveKey="1" size="small" onChange={this.handleTabChange}>
          {versionItem.map(element => {
            if (element.versionType !== 'newest') {
              return (
                <TabPane
                  tab={
                    <>
                      <Checkbox
                        onChange={e =>
                          this.handleCheckBoxOnChange(e.target.checked, element.versionType)
                        }
                      />
                      &nbsp;&nbsp;{element.versionName}
                    </>
                  }
                  key={element.versionType}
                >
                  <div className="tab-select-box">
                    <div className="tab-select-text">{element.versionName}</div>
                    <div className="tab-select-content">
                      {element.data.length > 0 ? (
                        <Row gutter={[0, 20]}>
                          {element.data.map(e => (
                            <Col key={e.stageId}>
                              <Row type="flex" justify="space-between" align="middle">
                                <Col span={3}>{e.stageName}</Col>
                                <Col span={21}>
                                  <Select
                                    defaultValue={e.itemInfo[0].versionId}
                                    style={{ width: '100%' }}
                                    disabled={element.versionType === 'newest'}
                                    onSelect={id =>
                                      this.selectContrastiveVersionVal(
                                        id,
                                        e.stageName,
                                        element.versionType,
                                      )
                                    }
                                  >
                                    {e.itemInfo.map(v => (
                                      <Option value={v.versionId} key={v.versionId}>
                                        {this.buildPlanVersionName(v)}
                                      </Option>
                                    ))}
                                  </Select>
                                </Col>
                              </Row>
                            </Col>
                          ))}
                        </Row>
                      ) : (
                        <div className="loading">
                          {loading ? (
                            <Spin className="loading" tip="数据请求中..." />
                          ) : (
                            <Empty className="loading" image={Empty.PRESENTED_IMAGE_SIMPLE} />
                          )}
                        </div>
                      )}
                    </div>
                  </div>
                </TabPane>
              );
            }
          })}
        </Tabs>
      </>
    );
  }
}

export default ContrastiveVersion;
